<template>
	<view>
		<view class="page-foot bg-white">
			<view class="m-hairline--top" @click="submit()">
				<view class="g-btn3">预览合同</view>
			</view>
		</view>
		<uni-forms ref="form" :modelValue="current" :rules="rules" validate-trigger="bind" err-show-type="undertext">
			<view class="container plr30" style="padding-bottom: 160rpx;">
				<uni-forms-item name="lessor_name">
					<view class="pt50 pb30 m-hairline--bottom">
						<view class="col89 fs34 mb25">房东姓名</view>
						<input class="col10 fs34" v-model="current.lessor_name" type="text" placeholder="请输入"></input>
					</view>
				</uni-forms-item>
				<uni-forms-item name="lessor_mobile">
					<view class="pt50 pb30 m-hairline--bottom">
						<view class="col89 fs34 mb25">房东电话</view>
						<input class="col10 fs34" v-model="current.lessor_mobile" type="number" placeholder="请输入"></input>
					</view>
				</uni-forms-item>
				<uni-forms-item name="lessor_identify">
					<view class="pt50 pb30 m-hairline--bottom">
						<view class="col89 fs34 mb25">房东身份证</view>
						<input class="col10 fs34" v-model="current.lessor_identify" type="idcard" placeholder="请输入"></input>
					</view>
				</uni-forms-item>
				<uni-forms-item name="renter_name">
					<view class="pt50 pb30 m-hairline--bottom">
						<view class="col89 fs34 mb25">租户姓名</view>
						<input class="col10 fs34" v-model="current.renter_name" type="text" placeholder="请输入"></input>
					</view>
				</uni-forms-item>
				<uni-forms-item name="renter_mobile">
					<view class="pt50 pb30 m-hairline--bottom">
						<view class="col89 fs34 mb25">租户电话</view>
						<input class="col10 fs34" v-model="current.renter_mobile" type="number" placeholder="请输入"></input>
					</view>
				</uni-forms-item>
				<uni-forms-item name="renter_identify">
					<view class="pt50 pb30 m-hairline--bottom">
						<view class="col89 fs34 mb25">租户身份证</view>
						<input class="col10 fs34" v-model="current.renter_identify" type="idcard" placeholder="请输入"></input>
					</view>
				</uni-forms-item>
				<picker mode="selector" :value="typeIdx" :range="typeArr" range-key="name" @change="typeChange">
					<view class="pt50 pb30 m-hairline--bottom">
						<view class="col89 fs34 mb25">支付类型<text class="red">*</text></view>
						<view class="m-arrow-right col10 fs34">{{typeIdx>=0 ? typeArr[typeIdx].name : '请选择'}}</view>
					</view>
				</picker>
				<uni-forms-item name="deposit">
					<view class="pt50 pb30 m-hairline--bottom">
						<view class="col89 fs34 mb25">押金<text class="red">*</text></view>
						<view class="flex-box red fs34 flex-align-baseline">
							<view>￥</view>
							<input class="red fs34 flex-grow-1" v-model="current.deposit" type="digit" placeholder="请输入"></input>
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="unit_price">
					<view class="pt50 pb30 m-hairline--bottom">
						<view class="col89 fs34 mb25">月租金<text class="red">*</text></view>
						<view class="flex-box red fs34 flex-align-baseline">
							<view>￥</view>
							<input class="red fs34 flex-grow-1" v-model="current.unit_price" type="digit" placeholder="请输入"></input>
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="renter_money">
					<view class="pt50 pb30 m-hairline--bottom">
						<view class="col89 fs34 mb25">租金<text class="red">*</text></view>
						<view class="flex-box red fs34 flex-align-baseline">
							<view>￥</view>
							<input class="red fs34 flex-grow-1" v-model="current.renter_money" type="digit" placeholder="请输入"></input>
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="lessor_medium_money">
					<view class="pt50 pb30 m-hairline--bottom">
						<view class="col89 fs34 mb25">房东中介费</view>
						<view class="flex-box red fs34 flex-align-baseline">
							<view>￥</view>
							<input class="red fs34 flex-grow-1" v-model="current.lessor_medium_money" type="digit" placeholder="请输入"></input>
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="renter_medium_money">
					<view class="pt50 pb30 m-hairline--bottom">
						<view class="col89 fs34 mb25">租户中介费<text class="red">*</text></view>
						<view class="flex-box red fs34 flex-align-baseline">
							<view>￥</view>
							<input class="red fs34 flex-grow-1" v-model="current.renter_medium_money" type="digit" placeholder="请输入"></input>
						</view>
					</view>
				</uni-forms-item>
				<view class="pt50 pb30 m-hairline--bottom">
					<view class="col89 fs34 mb25">房屋租期<text class="red">*</text></view>
					<view class="m-arrow-right col10 fs34 flex-box">
						<!-- 起-2023.08.08止 -->
						<picker mode="date" @change="startDateChange" :value="current.rent_start_date">
							<view>{{current.rent_start_date ? current.rent_start_date : '请选择开始日期'}}</view>
						</picker>
						<view class="mlr10">-</view>
						<picker mode="date" @change="endDateChange" :value="current.rent_end_date" :start="startDate">
							<view>{{current.rent_end_date ? current.rent_end_date : '请选择结束日期'}}</view>
						</picker>
					</view>
				</view>
				<uni-forms-item name="rent_address">
					<view class="pt50 pb30 m-hairline--bottom">
						<view class="col89 fs34 mb25">地址</view>
						<input class="col10 fs34" v-model="current.rent_address" type="text" placeholder="请输入"></input>
					</view>
				</uni-forms-item>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	const core = require('@/xilu/core.js');
	export default {
		data() {
			return {
				rental_id:0,
				typeArr: [],
				typeIdx: -1,
				current: {
					lessor_name: '',
					lessor_mobile: '',
					lessor_identify: '',
					renter_name: '',
					renter_mobile: '',
					renter_identify: '',
					type:'',
					deposit: '',
					unit_price:'',
					renter_money: '',
					lessor_medium_money: '',
					renter_medium_money: '',
					rent_address: '',
					rent_start_date :'',
					rent_end_date : ''
				},
				rules: {
					deposit: {
						rules: [{
							required: true,
							errorMessage: '请输入押金'
						}]
					},
					unit_price: {
						rules: [{
							required: true,
							errorMessage: '请输入月租金'
						}]
					},
					renter_money: {
						rules: [{
							required: true,
							errorMessage: '请输入租金'
						}]
					}
					
					// rent_address: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请输入地址'
					// 	}]
					// },
				},
			}
		},
		onReady: function() {
			this.$refs.form.setRules(this.rules)
		},
		onLoad(options) {
			this.rental_id = options.rental_id || '';
			this.getLessorInfo();
			this.getPayType();
		},
		methods: {
			startDateChange(e){
				this.current.rent_start_date = e.detail.value;
			},
			endDateChange(e){
				this.current.rent_end_date = e.detail.value
			},
			typeChange(e) {
				let index = e.detail.value;
				this.typeIdx = index;
				let typeArr = this.typeArr;
				this.current.type = typeArr[index].name;
			},
			//获取支付方式
			getPayType() {
				core.get({
					url: 'api/xiluhouse.common/rental_type',
					success: ret => {
						this.typeArr = ret.data
					}
				});
			},
			//获取房东信息
			getLessorInfo() {
				let that = this;
				core.get({
					url: 'api/xiluhouse.broker/rental_lessor',
					data: {
						rental_id:that.rental_id
					},
					success: ret => {
						that.current.lessor_name = ret.data.username || '';
						that.current.lessor_mobile = ret.data.mobile  || '';
						that.current.lessor_identify = ret.data.identify  || '';
					},
					fail: ret => {
						uni.showModal({
							title:'提示',
							content: ret.msg,
							success() {
								uni.navigateBack({});
							}
						})
						return false;
					}
				});
			},
			
			submit() {
				let that = this;
				that.$refs.form.validate(valid => {
					if (!valid) {
						let form = that.current;
						form['rental_id'] = that.rental_id;
						if(!form.type){
							uni.showToast({
								title:"请选择支付类型",
								icon:'none'
							});
							return false;
						}
						if(!form.rent_start_date || !form.rent_end_date){
							uni.showToast({
								title:"请选择租期",
								icon:'none'
							});
							return false;
						}
						core.post({
							url: 'api/xiluhouse.broker/rental_sign',
							data: form,
							loading:true,
							success: ret => {
								uni.showToast({
									title: ret.msg,
									icon: 'none',
									success:function (){
										uni.navigateTo({
											url: '/pages/rental/sign_now/sign_now?rental_order_id='+ret.data.id
										})
									}
								});
							}
						});
					} else {
						console.log('验证失败');
					}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.page-foot {
		.g-btn3 {
			margin: 9rpx auto;
		}
	}
</style>
